import { TextArea } from 'antd-mobile'
import styles from './index.module.less'
import type Store from '../../store'
import type { Answer, Question } from '../../interface'

type Props = Pick<Store, 'updateAnswer'> & {
    question: Question
    answer?: Answer
}

export const ShortAnswerQuestion = (props: Props) => {
    return (
        <div className={styles.showAnswerBox} key={props.question.id}>
            <TextArea
                value={props.answer?.result as string}
                showCount
                rows={5}
                maxLength={120}
                placeholder="请输入"
                className={styles.textArea}
                onChange={val => {
                    props.updateAnswer(props.question.id, val)
                }}
            />
            <span className={styles.tips}>限制填写120字符</span>
        </div>
    )
}
